page-pc-myreport {
  font-family: PingFangSC-Medium;
  .myReport {
    position: relative;
    text-align: center;

    & > div {
      transition: all 0.5s;
      transform: translateX(0);
    }

    .myReport-img {
      position: absolute;
      left: 12.1rem;

      margin-top: 1.8rem;
      margin-bottom: -4rem;

      z-index: 99999;
      img {
        width: 8rem;
        height: 8rem;

        border-radius: 50%;
        box-shadow: 0 -0.1rem 0.5rem 0.1rem rgba($color: #98bde6, $alpha: 0.3);
      }
    }
    .myReport-content {
      position: absolute;
      top: 5.8rem;
      left: 0;
      width: 32.2rem;
      height: 44rem;

      padding: 6.2rem 6.8rem 0rem 2.2rem;

      text-align: left;
      background-color: #ffffff;
      border-radius: 1rem;
      box-shadow: $shadow;
      @extend %item;
    }
    .colorstrip {
      position: absolute;
      left: 0rem;
      bottom: 0rem;
      width: 100%;
      height: 1.2rem;

      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      background: linear-gradient(to right, #7c7bf8 0%, #5aa9fc 100%);
    }
    .bgpaper {
      position: absolute;
      top: 7.5rem;
      left: 4.6rem;
      width: 29.7rem;
      height: 40.6rem;
      padding: 6.2rem 6.8rem 0rem 2.2rem;

      border-radius: 1rem;
      background-color: #ffffff;
      box-shadow: $shadow;
      z-index: -99;
      
      @extend %item;
    }
  }
}

%item{
  .overflow-div {
    height: 33.2rem;
    overflow: auto;
  }
  .content-item {
    height: 2rem;
    margin-bottom: 3.2rem;
  }
  .name {
    float: left;

    color: #65666c;
    font-size: 1.4rem;
    font-weight: 600;
  }
  .value {
    float: right;

    color: #65666c;
    font-size: 1.4rem;
    font-weight: 600;
  }
}
